<template>
  <div class="app-container">
    <!-- 筛选栏 -->
    <div v-show="showSearch">
      <!-- 搜索表单 -->
      <el-form :inline="true" ref="queryForm" size="small">
        <el-form-item label="学员id">
          <el-input
            v-model="queryParams.studentId"
            placeholder="请输入学员id"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="视频id">
          <el-input
            v-model="queryParams.videoId"
            placeholder="请输入视频id"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="观看状态">
          <el-select
            v-model="queryParams.complete"
            placeholder="请选择"
            clearable=""
          >
            <el-option
              v-for="item in statusOption"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格上方按钮 -->
    <!-- <div>
      <div style="float: left; margin-bottom: 10px">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="preAdd"
          >新增</el-button
        >
      </div>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
        style="float: right"
      ></right-toolbar>
    </div> -->

    <!-- 信息列表 -->
    <div style="float: left; width: 100%">
      <el-table
        border
        v-loading="listLoading"
        :header-cell-style="{ background: '#FAFAFA' }"
        :data="recordList"
        style="width: 100%"
        height="75vh"
      >
        <!-- 溢出隐藏 -->
        <el-table-column
          prop="videoRecord.studentId"
          label="学员id"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="videoRecord.videoId"
          label="视频id"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column label="视频标题">
          <template slot-scope="scope">{{
            scope.row.title == null ? "该视频已被删除" : scope.row.title
          }}</template>
        </el-table-column>
        <!-- 学员姓名 -->
        <el-table-column
          prop="studentName"
          label="学员姓名"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column prop="videoRecord.costTime" label="观看时长（分钟）">
          <template slot-scope="scope">
            <span>
              {{ (scope.row.videoRecord.costTime / 60).toFixed(1) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="videoRecord.complete" label="是否看完">
          <template slot-scope="scope">{{
            scope.row.videoRecord.complete == "1" ? "是" : "否"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="videoRecord.progress"
          label="观看进度（%）"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          prop="videoRecord.gmtCreate"
          :show-overflow-tooltip="true"
          sortable
        >
        </el-table-column>
        <!-- <el-table-column
          label="最后修改时间"
          prop="videoRecord.gmtModified"
          :show-overflow-tooltip="true"
          sortable
        >
        </el-table-column> -->
        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <!-- <el-button
              type="text"
              size="medium"
              @click="modifyStudyRecord(scope.row.videoRecord)"
            >
              编辑记录
            </el-button> -->
            <el-button
              type="text"
              size="medium"
              @click="deleteStudyRecord(scope.row.videoRecord)"
            >
              删除记录
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="width: 100%; text-align: center; margin-top: 10px">
        <el-pagination
          @size-change="sizeChange"
          @current-change="goto"
          :current-page="page.current"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          background
          style="float: right"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 新增对话框 -->
    <el-dialog
      title="新增学习记录"
      :visible.sync="uploadDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="uploadForm"
        :rules="rules"
        :model="uploadForm"
        label-width="80px"
      >
        <el-row>
          <el-form-item label="学员id" prop="title">
            <el-input
              v-model="uploadForm.studentId"
              placeholder="请输入学员id"
              maxlength="30"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="视频id" prop="videoId">
            <el-input v-model="uploadForm.videoId" placeholder="请输入视频id" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="是否看完" prop="complete">
            <el-radio v-model="uploadForm.complete" label="1">是</el-radio>
            <el-radio v-model="uploadForm.complete" label="0">否</el-radio>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="观看时长" prop="costTime">
            <el-input-number
              v-model="uploadForm.costTime"
              :min="0"
            ></el-input-number>
            秒
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="完成进度" prop="progress">
            <el-input-number
              v-model="uploadForm.progress"
              :min="0"
              :max="100"
            ></el-input-number>
            %
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog
      title="修改学习记录"
      :visible.sync="modifyDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="modifyForm"
        :rules="rules"
        :model="modifyForm"
        label-width="80px"
      >
        <el-row>
          <el-form-item label="学员id" prop="title">
            <el-input
              v-model="modifyForm.studentId"
              placeholder="请输入学员id"
              maxlength="30"
              :disabled="true"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="视频id" prop="videoId">
            <el-input
              v-model="modifyForm.videoId"
              placeholder="请输入视频id"
              :disabled="true"
            />
          </el-form-item>
        </el-row>
        <!-- <el-row>
          <el-form-item label="是否看完" prop="complete">
            <el-radio v-model="modifyForm.complete" label="1">是</el-radio>
            <el-radio v-model="modifyForm.complete" label="0">否</el-radio>
          </el-form-item>
        </el-row> -->
        <el-row>
          <el-form-item label="观看时长(秒)" prop="costTime">
            <el-input-number
              v-model="modifyForm.costTime"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="完成进度(%)" prop="progress">
            <el-input-number
              v-model="modifyForm.progress"
              :min="0"
              :max="100"
            ></el-input-number>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyDialog = false">取 消</el-button>
        <el-button type="primary" @click="updateStudyRecord()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryList,
  addRecord,
  removeRecord,
  updateRecord,
} from "@/api/studyRecord";
export default {
  name: "studyRecord",
  created: function () {
    this.getList();
  },
  data: function () {
    return {
      //状态选项
      statusOption: [
        { label: "已看完", id: "1" },
        { label: "未看完", id: "0" },
      ],
      //表格加载遮罩
      listLoading: "false",
      //搜索表单
      queryParams: {
        studentId: "",
        videoId: "",
        complete: "",
      },
      //分页设置
      page: {
        current: 1,
        total: 0,
        size: 10,
      },
      //视频列表
      recordList: [],
      //上传对话框
      uploadDialog: false,
      //上传表单
      uploadForm: {},
      //修改对话框
      modifyDialog: false,
      //修改表单
      modifyForm: {},
      //是否显示搜索表单
      showSearch: true,
      //表单验证
      rules: {
        studentId: [
          { required: true, message: "请输入学员id", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //获取记录列表
    getList: function () {
      let params = {};
      params.studentId = this.queryParams.studentId;
      params.videoId = this.queryParams.videoId;
      params.complete = this.queryParams.complete;
      params.limit = this.page.size;
      params.current = this.page.current;
      let that = this;
      this.listLoading = true;
      //表格数据列表
      queryList(params, this.page.current, this.page.size).then((res) => {
        const data = res.data;
        that.page.total = data.total;
        that.recordList = data.rows;
        // console.log(that.recordList);
        this.listLoading = false;
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        studentId: "",
        videoId: "",
        complete: "",
      };
      this.getList();
    },
    //点击新增预处理
    preAdd() {
      this.uploadForm = {
        studentId: "",
        videoId: "",
        complete: "0",
        costTime: "",
        progress: "",
      };
      //重置表单
      if (this.$refs["uploadForm"] !== undefined) {
        this.$refs["uploadForm"].resetFields();
      }
      this.uploadDialog = true;
    },
    //新增视频信息
    submitUpload() {
      let that = this;
      if (that.$refs["uploadForm"] !== undefined) {
        that.$refs["uploadForm"].validate((valid) => {
          if (valid) {
            addRecord(that.uploadForm).then((res) => {
              if (res.success == true) {
                this.$message({
                  message: "提交成功",
                  type: "success",
                });
                that.getList();
                that.uploadDialog = false;
              } else {
                this.$message({
                  message: "提交失败",
                  type: "error",
                });
              }
            });
          } else {
            return false;
          }
        });
      }
    },
    //关闭对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //删除单个记录
    deleteStudyRecord: function (row) {
      var self = this;
      this.$confirm("此操作将删除该学习记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var idArray = []; //删除列表
          idArray.push(row.id);
          self.deleteAjax(idArray);
        })
        .catch(() => {});
    },
    //删除Ajax请求
    deleteAjax: function (idArray) {
      var that = this;
      removeRecord(idArray[0]).then((res) => {
        if (res.success == true) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          that.getList();
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        }
      });
    },
    //编辑预处理
    modifyStudyRecord(row) {
      this.modifyForm = row;
      this.modifyDialog = true;
    },
    //提交编辑
    updateStudyRecord() {
      if (this.modifyForm.progress == 100) {
        this.modifyForm.complete = "1";
      } else {
        this.modifyForm.complete = "0";
      }
      updateRecord(this.modifyForm).then((res) => {
        if (res.success == true) {
          this.$message({
            message: "成功",
            type: "success",
          });
          this.getList();
          this.modifyDialog = false;
        } else {
          this.$message({
            message: "失败",
            type: "error",
          });
        }
      });
    },
    //跳转页面
    goto: function (current) {
      this.page.current = current;
      this.getList();
    },
    //页码改变
    sizeChange: function (size) {
      this.page.size = size;
      this.getList();
    },
  },
};
</script>

<style scoped>
</style>
